<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Flex 布局- 圣杯布局</title>
  <link rel="stylesheet" type="text/css" href="base.css">
  <style type="text/css">
  .HolyGrail{display: flex;min-height: 100vh;flex-direction: column;}
  header, footer{flex: 1;}
  .HolyGrail-body{display: flex;flex: 1;}
  .HolyGrail-content{flex: 1;}
  .HolyGrail-nav, .HolyGrail-ads{/* 两个边栏的宽度设为12em*/flex: 0 0 12em;}
  .HolyGrail-nav{/* 导航放到最左边*/order: -1;}
  header,footer{background: #ccc; padding: 50px;}
  nav,aside{background: #f0f0f0;padding: 150px 10px;}

  @media (max-width: 768px) {
    .HolyGrail-body {flex-direction: column; flex: 1; }
    .HolyGrail-nav{display: none;}
    .HolyGrail-content{min-height: 200px;}
    .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content {flex: auto; }
  }
  </style>
</head>

<body>
<body class="HolyGrail">
  <header> header </header>
  <div class="HolyGrail-body">
    <nav class="HolyGrail-nav"> nav </nav>
    <main class="HolyGrail-content"> main </main>
    <aside class="HolyGrail-ads"> aside </aside>
  </div>
  <footer>footer</footer>
</body>

</body>

</html>
